<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            height: 50px;
            background-color: white;
            box-shadow: 4px 4px 4px #ccc;
            display: flex;
            align-items: center;
        }
        .table{
            margin-top: 20px;
        }

        .data td{
            border: 1px solid #ccc;
            width: 100px;
            height: 50px;
        }
    </style>

</head>


<body>

    <div>
        <div class="top"></div>
        {{each data item}}
        <table class="table" style="width: 100%;border: 1px solid #ccc;">

            <tr class="data"> 

            <td>商品名称:<input type="text" id="shoppingName" value="{{item.name}}"></td>

            <td>商品图片:<input type="file" id="photo">
                <img id="preview" src="{{item.img}}" alt="" style="width: 100px;height: 100px;">
            </td>

            <td>商品价格:<input type="text" id="price" value="{{item.price}}"></td>
            <td>商品库存:<input type="text" id="stock" value="{{item.stock}}"></td>

            <td>
                <button id="increase" style=" height: 30px;width:100%;background-color:#ccc;border: 0;color: white;">提交</button>
            </td>

            </tr>
        </table>
        {{/each}}
    </div>



</body>

<script src="vue.js"></script>
<script src="jquery-3.5.1.js"></script>

<script>

    photo.onchange = function (event) {
        // 获取文件的上传列表
        let file = this.files[0]

        //new FileReader()用来把二进制图像转成base64
        let filereader = new FileReader()

        //readAsDataURL() 是FileReader()之中的一个读取二进制文件并转化为base64的方法
        filereader.readAsDataURL(file);  //读取了file并转化成base64

        // 如果不给filereader设置onload而直接给preview赋值会因为filereader还没有值而报错,所以得等filereader有值了之后,也就是onload事件触发了才给preview赋值
        filereader.onload = function (e) {
            //this.result是filereader的base64
            preview.src = this.result
            preview.style.backgroundColor = "white"
        }
    }

    increase.onclick = function () {
        // 创建一个formData表单对象，此对象设置数据可以通过ajax的send发送给服务器
        let formData = new FormData()

        let file = photo.files[0]; // 文件二进制数据

        // 追加数据
        formData.append('id', '{{data[0].id}}')
        formData.append('shoppingName', shoppingName.value)


        if (file == undefined) {
            // 如果file等于undefined,说明用户没有更改图片,那就直接发送原来图片的路径   
            formData.append('img', preview.src)

        } else {
            //  反之则有更改图片,上传图片的二进制数据
            formData.append('img', file)

        }
        formData.append('price', price.value)
        formData.append('stock', stock.value)
        // 发送ajax -post请求
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            location.href = '/'
        }
        xhr.open('post', 'http://127.0.0.1:5000/gai', true)

        xhr.send(formData)

    }

</script>

</html>